<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: palevioletred;
            /* transition: all 2s ease-in; */
            overflow: hidden;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: green;
            overflow: hidden;
        }
        .step1{
            height: 300px;
        }
        .step2{
            height: 0px;
        }
        .an1{
            transition: all 500ms ease-in;
        }
        .an2{
            transition: all 2s ease-in;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
        - 组件名：transition  -> 单一根节点元素操作
        - 组件名：transition-group -> 多根节点元素操作 - 每个根元素都必须绑定一个唯一的 key 属性
        - 作用：用于为vue项目中 组件、路由、元素 提供通过vue语法控制切换过程中的 css 动画执行时机判断和加载
        -->
        <input type="button" value="显示|隐藏" @click="isShow=!isShow"><br><br>
        <!-- <div class="box" v-show="isShow" :style=" isShow?'height:300px':'height:0px' "></div> -->
        <transition
            leave-class="step1"
            leave-active-class="an1"
            leave-to-class="step2"
            enter-class="step2"
            enter-active-class="an2"
            enter-to-class="step1"
        >
            <!-- <div v-if="isShow" class="box">
                <h1>1111</h1>
                <h1>222</h1>
            </div> -->
        </transition>
        <hr>
        <transition-group
            leave-class="step1"
            leave-active-class="an2"
            leave-to-class="step2"
            enter-class="step2"
            enter-active-class="an2"
            enter-to-class="step1"
        >
        <div v-if="isShow" class="box" key="aaaa"></div>
        <div v-if="!isShow" class="box1" key="cccc"></div>

    </transition-group>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    })
</script>
</html>